<style>
    .tool {
        width: 100%;
        height: 40px;
        position: relative;
    }

    .tool-search {
        width: 300px;
        position: absolute;
        right: 0;
    }

    .tool-search > input {
        height: 34px;
        line-height: 18px;
    }

    .search-btn {
        position: absolute;
        right: 1px;
        top: 1px;
        width: 50px;
        height: 32px;
        text-align: center;
        line-height: 28px;
        border-left: 1px solid #E6E6E6;
        background: #F2F2F2;
    }

    .search-btn > img {
        width: 25px;
        margin-left: -5px;
        cursor: pointer;
    }

    .layui-table-cell {
        height: 30px;
        line-height: 30px;
    }

    .memberAvatarUpload {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        position: absolute;
        top: 20px;
        right: 10px;
        cursor: pointer;
        border: 2px solid #E6E6E6;
    }
    .layui-table .layui-form-switch {
        height: 18px;
        line-height: 18px;
        border-radius: 10px;
        width: 38px;
    }
    .layui-table .layui-form-switch i {
        top: 1px;
        left:3px;
    }
    .layui-table .layui-form-onswitch i {
        top: 1px;
        left:30px;
    }
</style>
<div>
    <div class="tool">
        <div class="layui-input-inline layui-form" style="position: absolute;left:0;top:2px;">
            <button id="member-add" class="layui-btn layui-btn-sm" option="0"><i class="layui-icon">&#xe654;</i>添加用户</button>
        </div>
        <div class="tool-search">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入会员关键词"
                   class="layui-input">
            <div class="search-btn">
                <img src="./static/icon/search.svg"/>
            </div>
        </div>
    </div>
    <div id="member-list"></div>
</div>

<!-- 添加与编辑会员账号-->
<div id="member-box" style="display: none">
    <form class="layui-form layui-form-pane" lay-filter="member">
        <div style="padding: 10px;width: 420px;position: relative;">
            <div class="layui-form-item">
                <img id="memberAvatarUpload" src="static/images/tx.jpg" class="memberAvatarUpload"/>
                <input type="hidden" id="avatar" name="avatar">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">等级</label>
                <div class="layui-input-block" style="width: 200px;">
                    <select id="selPid" name="type" lay-verify="required" lay-search="">
                        <option id="pid_0" value="0">普通会员</option>
                        <option id="pid_1" value="1">黄金会员</option>
                        <option id="pid_2" value="2">钻石会员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block" style="width: 200px;">
                    <input type="text" name="account" autocomplete="off"
                           placeholder="请输入账号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickName" autocomplete="off"
                           placeholder="请输入昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" id="sex_1" name="sexSel" value="1" title="男" checked>
                    <input type="radio" id="sex_0" name="sexSel" value="0" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" id="birthday" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" autocomplete="off" placeholder="请输入手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="avatarBar">
    <img src="{{d.avatar}}" style="border-radius: 50%;width:28px;height: 28px;"/>
</script>
<script type="text/html" id="sexBar">
    {{#if (d.sex == 0){}}
    <img src="static/icon/girl.svg"/>
    {{#}else if (d.sex == 1){}}
    <img src="static/icon/man.svg"/>
    {{#}}}
</script>
<script type="text/html" id="isLockBar">
    <input type="checkbox" name="switch" data="{{d.id}}" nickname="{{d.nickName}}" lay-skin="switch"
           lay-filter="isLockCheck" lay-text="正常|锁定" {{#
           if(d.isLock== 0){}}checked{{#}}}>
</script>
<script type="text/html" id="thirdTypeBar">
    {{#if (d.thirdType == 0){}}
    <img src="static/icon/weixin.svg"/> 微信
    {{#}else if (d.thirdType == 1){}}
    <img src="static/icon/QQ.svg"/> 扣扣
    {{#}else if (d.thirdType == 2){}} 微博
    <img src="static/icon/weibo.svg"/>
    {{#}}}
</script>

<script type="text/html" id="actBar">
    <a id="edit-member" class="layui-btn layui-btn-primary layui-btn-xs" data="{{d.id}}" option="1"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a id="del-member" class="layui-btn layui-btn-danger layui-btn-xs" data="{{d.id}}" nickname="{{d.nickName}}"><i
            class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/javascript">
    $(function () {
        layui.form.render(); //更新全部;

        var memberTable = layui.table.render({
            elem: '#member-list'
            , url: ctx + '/member/page'
            , request: {
                pageName: 'index'
                , limitName: 'size'
            }
            , response: {
                countName: 'total' //数据总数的字段名称，默认：count
            }
            , cols: [[{field: 'avatar', width: 60, title: '头像', templet: '#avatarBar'}
                , {field: 'account', width: 120, title: '账号'}
                , {field: 'nickName', width: 120, title: '昵称'}
                , {field: 'sex', width: 60, title: '性别', templet: '#sexBar'}
                , {field: 'tel', width: 120, title: '手机号'}
                , {field: 'email', title: '邮箱'}
                , {field: 'birthday', title: '生日'}
                , {field: 'loginCount', title: '登录次数'}
                , {field: 'lastLoginIp', title: '上次登录IP'}
                , {field: 'lastLoginTime', title: '上次登录时间'}
                , {field: 'isLock', width: 80, title: '状态', templet: '#isLockBar'}
                , {field: 'type', title: '等级'}
                , {field: 'thirdType', width: 100, title: '授权', templet: '#thirdTypeBar'}
                , {field: 'action', width: 150, title: '操作', fixed: 'right', toolbar: '#actBar'}
            ]]
            , page: true
        });

        $(document).off("click").on("click", "button#member-add, a#edit-member", function () {
            var optName = "添加";
            var opt = $(this).attr("option");
            $("input[name='account']").removeAttr("disabled");
            var mId;
            //编辑操作
            if (opt == 1) {
                optName = "编辑";
                mId = $(this).attr("data");
                $.get(ctx + "/member/query/" + mId, function (res) {
                    if (res.code == 0) {
                        app.fullForm($("form.layui-form"), res.data);
                        $("img#memberAvatarUpload").attr("src", res.data.avatar);

                        $("div.layui-layer select#selPid").removeAttr("selected");
                        $("div.layui-layer select#selPid option#pid_" + res.data.type).attr("selected", true);

                        //设置性别选中
                        $("div.layui-layer input[value='radio']").removeAttr("checked");
                        $("div.layui-layer input#sex_" + res.data.sex).attr("checked", true);

                        $("input[name='account']").attr("disabled", true);
                        layui.form.render(); //更新全部;
                    } else {
                        app.tips(res.message, 0);
                    }
                });
            }
            //自定页
            layer.open({
                type: 1,
                resize: false,
                area: ['440px', 'auto'],
                title: '<img src="static/icon/create.svg"/> ' + optName + '会员',
                btn: ['Ok', 'Cancel'],
                content: $('#member-box').html(),
                yes: function (index) {
                    var jsonObj = app.serializeObject($("form.layui-form"));
                    if (!/^[a-zA-Z0-9_]*$/.test(jsonObj.account)) {
                        app.tips("账号只能是英文或数字或下划线组成!", 0);
                        return;
                    } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(jsonObj.tel)) {
                        app.tips("请输入正确的手机号码!", 0);
                        return;
                    } else if (!/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(jsonObj.email)) {
                        app.tips("请输入正确的邮箱!", 0);
                        return;
                    }
                    var url = opt == 1 ? ctx + "/member/update/" + mId : ctx + "/member/add";
                    jsonObj.sex = jsonObj.sexSel;
                    $.post(url, jsonObj, function (res) {
                        if (res.code == 0) {
                            app.tips(opt == 1 ? "会员修改成功!" : "新会员添加成功!");
                            layer.close(index);
                            //刷新表格
                            memberTable.reload();
                        } else {
                            app.tips(res.message, 0);
                        }
                    });
                }
            });
            layui.form.render(); //更新全部;

            //渲染日期
            layui.laydate.render({
                elem: 'div.layui-layer #birthday'
            });

            //上传用户头像
            var memberAvatarUpload = layui.upload.render({
                elem: "div.layui-layer img#memberAvatarUpload" //绑定元素
                , url: ctx + '/upload/oss' //上传接口
                , data: {dir: "IdleEgg/avatar"}
                , exts: "png|jpg"
                , field: "files"
                , size: 1000
                , done: function (res) {
                    //上传完毕回调
                    if (res.code == 0) {
                        this.item.attr("src", res.data[0]);
                        $("input#avatar").val(res.data[0]);
                        app.tips("会员头像上传成功!");
                    } else {
                        app.tips(res.message, 0);
                    }
                }
            });
        });

        //删除会员
        $(document).on("click", "a#del-member", function () {
            var _that = $(this);
            var nickName = _that.attr("nickname");
            layer.confirm("是否确定删除 \"" + nickName + "\"？", {
                btn: ['Ok', 'Cancel'] //按钮
            }, function (index) {
                var openId = _that.attr("data");
                $.post(ctx + "/member/delete/" + openId, function (res) {
                    if (res.code == 0) {
                        app.tips("\"" + nickName + "\" 删除成功!");
                        layer.closeAll();
                        //刷新表格
                        memberTable.reload();
                    } else {
                        app.tips(res.message, 0);
                    }
                });
            });
        });

        //修改会员是否锁定
        layui.form.on('switch(isLockCheck)', function (obj) {
            var mId = $(this).attr("data");
            var nickName = $(this).attr("nickname");
            var chk = this.checked;
            $.post(ctx + "/member/update/" + mId, {isLock: (chk ? 0 : 1)}, function (res) {
                if (res.code == 0) {
                    app.tips(chk ? "\"" + nickName + "\" 已取消锁定!" :"\"" + nickName + "\" 已被锁定!");
                } else {
                    app.tips(res.message, 0);
                }
            });
        });
    })
</script>